<template>
	<div>
		<v-btns :visible="true" title="管理员列表">
			<el-input type="text" v-model="params.key" placeholder="账号/昵称/电话号码"></el-input>
			<el-select v-model="params.status" style="width: 100px">
				<el-option :value="2" label="启用"></el-option>
				<el-option :value="1" label="禁用"></el-option>
			</el-select>
			<el-button type="light" icon="el-icon-search" @click="getList">搜索</el-button>
			<template v-slot:foots>
				<el-button icon="el-icon-add" type="dark" size="mini" @click="toAddEdit">添加管理员</el-button>
			</template>
		</v-btns>
		<div style="width: 100%">
			<el-table :data="tableData" border v-loading="tableLoad" style="width: 100%">
				<el-table-column prop="date" fixed label="操作" align="center" width="160">
					<template slot-scope="scope">
						<el-button icon="el-icon-edit" type="text" @click="toAddEdit(scope.row.id)">编辑</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="id" label="编号" align="center" width="80"></el-table-column>
				<el-table-column prop="username" label="账号" min-width="160"></el-table-column>
				<el-table-column prop="nickname" label="昵称" min-width="160"></el-table-column>
				<el-table-column prop="mobile" label="手机号" align="center" width="160"></el-table-column>
				<el-table-column prop="status" label="状态" align="center" width="80">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							active-color="#34C436"
							inactive-color="#909399"
							:active-value="1"
							:inactive-value="0"
							@change="changeStatus($event, scope.row.id)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间" align="center" width="180"></el-table-column>
			</el-table>
		</div>

		<el-dialog :title="formTitle" :visible.sync="formVisible" width="500px" @closed="closeForm">
			<el-form :model="formData" label-width="100px" v-loading="editLoading">
				<el-form-item label="账号" required>
					<el-input v-model="formData.username" style="width: 300px" placeholder="用于登陆的账号"></el-input>
				</el-form-item>
				<el-form-item label="昵称" required>
					<el-input v-model="formData.nickname" style="width: 300px" placeholder="昵称"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input show-password v-model="formData.password" style="width: 300px" :placeholder="formPwd"></el-input>
				</el-form-item>
				<el-form-item label="手机号" required>
					<el-input v-model="formData.mobile" style="width: 300px" placeholder="用于登陆的手机号"></el-input>
				</el-form-item>
				<el-form-item label="角色" required>
					<el-select multiple v-model="roles" style="width: 300px" placeholder="请选择角色权限">
						<el-option
							:value="item.id + ''"
							:label="item.name"
							v-for="(item, index) in roleSelect"
							:key="index"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="light" @click="formVisible = false">取 消</el-button>
				<el-button type="dark" @click="addEdit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import btns from '@/components/public/btns.vue'
import { mapState } from 'vuex'
import { adminList, adminAddEdit, adminGetDetail, adminSetStatus, getSelect } from '@/request/api.js'
import auth from '../mixins/auth'
export default {
	mixins: [auth],
	components: {
		'v-btns': btns
	},
	data() {
		return {
			tableData: [],
			params: {
				page: 1,
				pageSize: 10
			},
			formVisible: false,
			formData: {},
			formTitle: '',
			formPwd: '',
			roleSelect: [],
			roles: [],
			tableLoad: false,
			editLoading: false
		}
	},
	computed: {
		...mapState(['app'])
	},
	created() {
		getSelect({ type: 'rolelist' }).then(res => {
			this.roleSelect = res.data.rolelist
		})
		this.init()
	},
	methods: {
		init() {
			this.getList()
		},
		getList() {
			this.tableLoad = true
			adminList(this.params).then(res => {
				this.tableLoad = false
				this.tableData = res.data.data
			})
		},
		toAddEdit(id) {
			this.formVisible = true
			if (id > 0) {
				this.formTitle = '编辑'
				this.formPwd = '不填不修改'
				this.formData.id = id
				this.editLoading = true
				adminGetDetail({ id: id }).then(res => {
					this.editLoading = false
					if (res.code == 1) {
						this.formData = res.data
						this.roles = res.data.roles.split(',')
					} else {
						this.$message.error(res.msg)
					}
				})
			} else {
				this.formTitle = '添加'
				this.formPwd = '用于登录的账号'
			}
		},
		addEdit() {
			this.formData.roles = this.roles.join(',')
			adminAddEdit(this.formData).then(res => {
				if (res.code == 1) {
					this.formVisible = false
					this.getList()
					this.$message.success(res.msg)
				}
			})
		},
		closeForm(done) {
			this.formData = {}
			this.formVisible = false
			this.roles = []
		},
		changeStatus(value, id) {
			adminSetStatus({ status: value, id: id }).then(res => {
				if (res.code == 1) {
					this.getList()
					this.$message.success(res.msg)
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped></style>
